<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/23
  Time: 10:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的购物车</title>
    <%@include file="/common/head.jsp"%>
    <script type="text/javascript">
        $(function () {
            $("a.deleteItem").click(function () {
               return confirm("确定删除《"+$(this).parent().parent().find("td:first").text()+"》吗？")
            });
            $("a.clearItem").click(function () {
                return confirm("确定删除购物车所有商品吗？")
            });
            //给class=updateCount的输入框绑定onchange事件
            $("input.updateCount").change(function () {
                var name=$(this).parent().parent().find("td:first").text();
                if(confirm("确定修改《"+name+"》的数量吗？")){
                    //发起请求给服务器保存修改
                    var bookId=$(this).attr("bookId");
                    var count=this.value;
                    location.href="${pageScope.basePath}cs?action=updateCount&id="+bookId+"&count="+count;
                }
                else {
                    this.value=this.defaultValue;
                    //defaultValue属性是表单项Dom对象的属性，它表示默认的值【即:原来的值】
                }
            })
        })
    </script>
</head>
<body>
<h1 align="right" style="color: cadetblue">${sessionScope.user.username}的购物车</h1>
<div align="right">
    <font color="red" face="楷体" size="3">
        <%@include file="/common/userMenu.jsp"%>
    </font>
</div>
<c:if test="${not empty sessionScope.cart.items}">
<%--    判断购物车是否为空，不为空才展示购买的商品--%>
    <table align="center" border="1">
        <tr>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${sessionScope.cart.items}" var="item">
            <tr>
                <td>${item.value.name}</td>
                <td>
                    <input bookId="${item.value.id}" class="updateCount" style="width: 65px" type="text" value="${item.value.count}">
                </td>
                <td>${item.value.price}</td>
                <td>${item.value.totalPrice}</td>
                <td><a class="deleteItem" href="cs?action=deleteItem&id=${item.value.id}">删除</a></td>
            </tr>
        </c:forEach>
        <tr>
            <th colspan="5">
                总商品数：${sessionScope.cart.totalCount}<%="\t"%>
                总价：${sessionScope.cart.totalPrice}元<%="\t"%>
                <a class="clearItem" href="cs?action=clear" style="text-decoration: none;color: red">清空购物车</a><%="\t"%>
                <a href="os?action=createOrder" style="text-decoration: none;color: chartreuse">->去结账</a>
            </th>
        </tr>
    </table>
</c:if>
<c:if test="${empty sessionScope.cart.items}">
你的购物车是空的
</c:if>
</body>
</html>
